<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{::style},~{})">
    <title>商务布局管理</title>
    <style>
      .el-message-box__btns {text-align: center;}
        .el-message-box__btns button:nth-child(2){margin-right: -125px;}
    </style>
</head>
<body>
<div v-loading="loading" id="organizationManage" class="organizationManage mainPadding" style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20" >
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>业务设置</el-breadcrumb-item>
        <el-breadcrumb-item>商务布局管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
        <el-col :span="10">
            <a href="/invitearea/addInviteAreaPage"><el-button type="primary"><i class="el-icon-plus"></i>添加</el-button></a>
            <el-button type="success" @click="updateButton" style="margin-left: 10px;"><i class="el-icon-edit"></i>修改</el-button>
            <el-button type="danger" @click="deleButton"><i class="el-icon-delete"></i>删除</el-button>
            <el-button type="warning" @click="dialogBatchVisible = true"><i class="el-icon-download"></i>导入</el-button>
        </el-col>

        <el-col :span="14" style="text-align: right;">
            <el-form :inline="true">
                <el-form-item label="商务小组:" label-width="55px">
          					<el-select filterable v-model="searchForm.businessGroupId" placeholder="请选择商务小组" style="margin-right: 10px;" clearable>
          					    <el-option
          					      v-for="item in swList"
          					      :key="item.id"
          					      :label="item.name"
          					      :value="item.id">
          					    </el-option>
          					</el-select>
                </el-form-item>
                <el-form-item label="电销组:" label-width="55px">
          					<el-select filterable v-model="searchForm.telemarketingTeamId" placeholder="请选择电销组" style="margin-right: 10px;" clearable>
        					    <el-option
        					      v-for="item in dxList"
        					      :key="item.id"
        					      :label="item.name"
        					      :value="item.id">
        					    </el-option>
          					</el-select>
                </el-form-item>
                <el-form-item label="">
  					        <el-button icon="el-icon-search" type="primary" @click="inviteAreaListPage">搜索</el-button>
                </el-form-item>   
            </el-form>
        </el-col>
    </el-row>
    <el-row  class="mainSearchBg">
        <el-table 
            ref="multipleTable"
            tooltip-effect="dark"
            empty-text="无数据"
            style="width: 100%"
            border
            :data="dataTable"  @selection-change="handleSelectionChange">
             <el-table-column align="center" prop="id" type="selection" width="55"></el-table-column> 
             <!-- <el-table-column prop="date" label="全选" width="180"></el-table-column>  -->
            <el-table-column align="center" prop="businessGroup" label="商务小组"></el-table-column>
            <el-table-column align="center" prop="provinces" label="区域"></el-table-column>
            <el-table-column align="center" prop="telemarketingTeam" label="电销组"></el-table-column>
            <el-table-column align="center" prop="projects" label="签约项目"></el-table-column>
        </el-table>
         <table-pagination :pager="pager" v-if="paginationShow" @change="inviteAreaListPage"></table-pagination>
    </el-row>
      
    </el-row>
  <el-dialog :title="addOrModifyDialogTitle" :visible.sync="dialogFormVisible" @close="closeAddCustomFieldDialog">
       
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelForm('customMenuForm')">取 消</el-button>
            <el-button type="primary" @click="saveFieldMenu('customMenuForm')">确 定</el-button>
        </div>
    </el-dialog>
    
         <!-- 批量添加 自定义字段弹窗 start -->
            <el-dialog title="邀约区域导入" :visible.sync="dialogBatchVisible" @close="closeUploadFileDialog">
               <el-row class="marginB20">
                                 <!-- 下载批量上传模版: <a href="" download="页面自定义字段导入模板">页面自定义字段模板</a> -->
                                 下载批量上传模版：<a href="/excel-templates/area-division.xlsx" download="邀约区域模板"><span style="color:#409EFF">邀约区域模板下载</span></a>
               
               </el-row>
               <el-row>
                  <el-upload
                      class="upload-demo"
                      ref="upload"
                      :multiple="false"
                      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                      action="/invitearea/uploadCustomField"
                      :file-list="fileList"
                      :on-change="handleChange"
                      :before-upload="beforeUpload"
                      :on-success="uploadSuccess"
                     :on-error="uploadError"
                      
                      :auto-upload="false">
                      <el-button slot="trigger" size="small" type="primary" style="margin-right: 10px;">上传文件</el-button>
                      <span slot="tip" class="el-upload__tip">只能上传xlsx文件</span>
                    </el-upload>
               
               
               </el-row>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitUpload">确 定</el-button>
                <el-button type="info" @click="dialogBatchVisible = false">取 消</el-button>
              </div>
            </el-dialog>
            
          <el-dialog :title="addOrModifyDialogTitle" :visible.sync="exportFormVisible"  width="50%">
            <el-form>
            	
            	 <div id="totalNumId" class="marginB10">{{dataNum}}</div>
                 <el-row>
                <el-table 
                    ref="multipleTable"
                    tooltip-effect="dark"
                    empty-text="无数据"
                    style="width: 100%"
                    border
                    :data="exportdataTable"  >
                    <el-table-column align="center" prop="serialNumber" label="序号"></el-table-column>
                    <el-table-column align="center" prop="businessGroup" label="商务小组"></el-table-column>
                    <el-table-column align="center" prop="provinces" label="区域"></el-table-column>
                    <el-table-column align="center" prop="telemarketingTeam" label="电销组"></el-table-column>
                    <el-table-column align="center" prop="projects" label="签约项目"></el-table-column>
                </el-table>
            </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button type="primary" :disabled="confirmBtnDisabled" @click="submitExport"><span data="1" id="showButton">导入</span></el-button>
            </div>
        </el-dialog>
        
</div>
</body>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">

    var swList=[[${swList}]];
    var dxList=[[${dxList}]];
    var orgVM =  new Vue({
        el: '#organizationManage',
        data: {
          paginationShow: false,
          dataNum:"",
        	loading:false,
        	fileList:[],//上传文件列表
        	dialogBatchVisible:false,
          searchForm:{
            telemarketingTeamId:"",
            businessGroupId:""
          },
        	addOrModifyDialogTitle:"",
        	dialogFormVisible:false,
        	exportFormVisible:false,
        	confirmBtnDisabled:false,
        	dataTable:[],
        	exportdataTable:[],
        	errorexportdataTable:[],
        	multipleSelection: [],
        	dxList:dxList,
        	swList:swList,
        	businessGroups:[{
            	value: '1',
                label: '登陆名称'	
            	},
            	{
               	value: '2',
                label: '姓名'	
               	}
            ],
            telemarketingTeams:[{
            	value: '1',
                label: '登陆名称'	
            	},
            	{
               	value: '2',
                label: '姓名'	
               	}
            ],
            pager:{
                total: 0,
                currentPage: 1,
                pageSize: 20,
            },
            storeForm:{
              telemarketingTeamId:"",
              businessGroupId:""
            },
            storeId: '',
            scrollTop: 0,
             
        },
        methods: {
        	    inviteAreaListPage(){//查询按钮
            	  var param = {}; 
            	  var pageSize = this.pager.pageSize;
                  var pageNum = this.pager.currentPage;
                  param.pageNum = pageNum;
                  param.pageSize = pageSize;
                  param.businessGroupId=this.searchForm.businessGroupId;
                  param.telemarketingTeamId=this.searchForm.telemarketingTeamId;
                  console.log(param);
                  axios.post('/invitearea/inviteAreaListPage',param).then(function (response) {
                  	  console.log(response);
                      if(null===response||response.data==null||response.data.code!='0'){
	                  	  alert(response.data.msg);
	                  	  return ;
                     }else{
                    	 orgVM.dataTable =response.data.data.data; 
                    	 orgVM.pager.currentPage= response.data.data.currentPage;
                    	 orgVM.pager.total= response.data.data.total;

                       // 取出存储的id
                      if(!orgVM.paginationShow){
                         if(orgVM.storeId){
                             orgVM.$nextTick(function(){
                                var storage = [];
                                orgVM.dataTable.forEach(function(item, index){
                                    if(item.id === orgVM.storeId ){
                                        storage.push(orgVM.dataTable[index]);
                                    }
                                })
                                orgVM.toggleSelection(storage);
                                orgVM.$el.querySelector('.el-table__body-wrapper').scrollTop = orgVM.scrollTop;
                            })
                        }
                      }else{
                        removeSessionStore ("inviteAreaListStoreForm");
                        removeSessionStore ("inviteAreaListOtherVal");
                      }
                      orgVM.paginationShow = true;
                      orgVM.storeForm = orgVM.searchForm;
                     } 
                  })
                  .catch(function (error) {
                    console.log(error);
                  })
                  .then(function () {
                  });  
                  
              } ,
              toggleSelection(rows) { // table select 默认选中fn
                  if (rows) {
                      rows.forEach(row => {
                          this.$refs.multipleTable.toggleRowSelection(row,true);
                      });
                  } else {
                      this.$refs.multipleTable.clearSelection();
                  }
              },
            
              updateButton(){
            	  //修改菜单数据	
              	var rows = this.multipleSelection;
                  if(rows.length<1){
                      this.$message({
                         message: '请选择一条数据进行修改',
                         type: 'warning'
                       });
                      return;
                  }
                var ids="";
    	            if(null!=rows){
    	             for ( var i = 0; i <rows.length; i++){
    	            	if("" == ids){
    	            		ids = rows[i].id
    	            	}else{
    	            		ids = ids+","+rows[i].id
    	            	}
    	             }
	              }
                // 存储选中信息--start  
                setSessionStore("inviteAreaListStoreForm", this.storeForm);
                var otherVal = {
                    "currentPage": this.pager.currentPage,
                    "clueId": ids,
                    "scrollTop": this.$el.querySelector('.el-table__body-wrapper').scrollTop
                }
                setSessionStore("inviteAreaListOtherVal", otherVal);
                // 存储选中信息--end  
  	            window.location.href="/invitearea/updateInviteAreaPage?ids="+ids; 
              },
              deleButton(){
            	  var rows = this.multipleSelection;
                  if(rows.length <1){
                      this.$message({
                         message: '请选择删除数据',
                         type: 'warning'
                       });
                      return;
                  }
                  var moduleName="";
    	           if(null!=rows){
    	 		       for ( var i = 0; i <rows.length; i++){
    	 		    	  moduleName+="【"+rows[i].businessGroup+"】";
    	 		        }
    	           }
    	           this.$confirm("确定要删除"+moduleName+"邀约区域吗?", '提示', {
                       confirmButtonText: '确定',
                       cancelButtonText: '取消',
                       type: 'warning'
                   }).then(() => {
                      	// 查询 table 需要数据
                       var param = {};
                       var deleInfo=this.multipleSelection;
     	        	    var ids="";
     		            if(null!=deleInfo){
     		             for ( var i = 0; i <deleInfo.length; i++){
     		            	if("" == ids){
     		            		ids = deleInfo[i].id
     		            	}else{
     		            		ids = ids+","+deleInfo[i].id
     		            	}
     		             }
     		             var param={};
     		             param.ids=ids;
    	                 axios.post('/invitearea/deleInviteArea',param).then(function (response) {
    	                  	  console.log(response);
    	                      if(null !==response && response.data !=null && response.data.code=='0'){
    	                    	  window.location.href="/invitearea/inviteAreaList"; 
    	                     }else{
    	                    	 alert(response.data.data.message);
     	                  	  	return ;
    	                     } 
    	                  }).catch(function (error) {
                              console.log(error);
                          })
                          .then(function () {
                            // always executed
                          });  
     	              
                     }
                   }).catch(() => {
                       this.$message({
                           type: 'info',
                           message: '已取消删除'
                       });          
                   });
    	           
    	     
              },
              exportButton(){
            	  window.location.href="/module/moduleManager/exportInviteArea?moduleId="+rows[0].id; 
              },
              showExport(){//点击弹出新增dialog
              	this.dialogFormVisible = true;
              	this.addOrModifyDialogTitle="添加菜单页面";
              },
              closeAddCustomFieldDialog(){//关闭添加自定义字段dialog
              	  this.$refs['customMenuForm'].resetFields();
              },
              cancelForm(formName) {
                  this.$refs[formName].resetFields();
              	this.dialogFormVisible = false;
              },
              handleSelectionChange(val) {
                  this.multipleSelection = val;
              }
              ,
              closeUploadFileDialog(){//关闭上传文件 dialog
            	  this.$refs.upload.clearFiles();
              },
              handleChange(files,fileList){//只允许选择一个文件
                  this.fileList = fileList.slice(-1);
            },
            beforeUpload(file){//上传之前 文件校验
                var isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                if(!isTextComputer){
                	orgVM.fileList = [];
                	orgVM.loading = false;
                    this.$message.error('文件格式错误');
                    return false;
                }
            },
            uploadSuccess(response, file, fileList){//上传成功后
            	
          	  if(response.code=='0'){
          		var num = 0;
          		this.addOrModifyDialogTitle="预览数据";
          		  //清空文件里列表
              	  this.$refs.upload.clearFiles();
                    this.dialogBatchVisible = false;
                   	orgVM.exportdataTable =response.data;
                   	orgVM.loading = false;
                   	orgVM.exportFormVisible = true;
                   	num = orgVM.exportdataTable.length;
                   	// alert("11 "+num);
                     // $("#totalNumId").html("预览数据，共"+num+"条数据");
                   	orgVM.dataNum="预览数据，共"+num+"条数据"
                   	if(num ==0){
                   		orgVM.confirmBtnDisabled = true;
                   	}
                    
                    
          	  }else{
          		orgVM.loading = false;
          		  this.$message('上传失败');
          	  }
          	
            },
            uploadError(){//上傳失敗
              this.loading = false;
          	  this.$message({message:'上传失败',type:'error'});
            }
            , submitUpload() {//提交文件
            	orgVM.confirmBtnDisabled = false;
            	this.loading = true;
            	var fileList = this.fileList;
            	if(!fileList || fileList.length!=1){
            		this.$message.error({message:'未选中文件',type:'error'});
            		orgVM.loading = false;
            		return false;
            	}
                this.$refs.upload.submit();
              },
              
              submitExport(){
            	  if($("#showButton").attr("data") ==2){
                	  window.location.href="/invitearea/inviteAreaList"; 
                	  return;
                  }

            	  this.$alert('确认导入数据','提示', {
                      dangerouslyUseHTMLString: true,
                      type: 'warning'
                  }).then(() => {
                	  $("#showButton").html("导入中");
                	  var param = {};
                	  orgVM.loading = true;
                	  param.list = orgVM.exportdataTable;
                	  if(param.list !=null && param.list.length==0){
                  		  this.loading = false;
                  		  this.$message({message:'无要上传的数据',type:'error'});
                  		  return;
                  	  }
                	  orgVM.exportFormVisible = false;
                	  axios.post('/invitearea/importInvitearea',param).then(function (response) {
                      	  console.log(response);
                          if(null !==response && response.data !=null && response.data.code=='0'){
                        	  if(response.data.data !=null  && response.data.data.length !=0){
                        		  $("#showButton").html("知道了");
                          		  $("#showButton").attr("data",2);
                          		  orgVM.addOrModifyDialogTitle="部分数据导入失败";
                          		  orgVM.exportFormVisible = true;
                          		  orgVM.loading = false;
                          		  orgVM.exportdataTable =response.data.data;
                          		  orgVM.dataNum="以下内容导入失败，请重新导入"
                        	  }else{
                        		  orgVM.$message({message:'导入成功',type:'success',duration:2000,onClose:function(){
                        			  window.location.href="/invitearea/inviteAreaList"; 
                                  }});
                        		  
                        	  }
                        	
                         }else{
                        	 alert(response.data.data.msg);
    	                  	  	return ;
                         } 
                      }).catch(function (error) {
                          console.log(error);
                      })
                      .then(function () {
                        // always executed
                      }); 
                  });
            	  
            	 
              }
        },
        created(){
            // 进入页面判断有是否有存储值
            if(!this.paginationShow){
                var storeVal = getSessionStore("inviteAreaListStoreForm");
                var otherVal = getSessionStore("inviteAreaListOtherVal");
                if(storeVal && otherVal){
                    this.searchForm = storeVal;
                    this.$set(this.pager,"currentPage",otherVal.currentPage);
                    this.storeId = otherVal.clueId;
                    this.scrollTop = otherVal.scrollTop;
                }
            };
            // 取页数存储
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}

        	  this.inviteAreaListPage();
        	  document.getElementById('organizationManage').style.display = 'block';
        },//created方法 结束
        mounted(){
            document.getElementById('organizationManage').style.display = 'block';
        }
    })
</script>
</html>